<template>
	<view class="page">
		<Navbar fixed statusBar leftIcon="back" :title="false" backgroundColor="transparent" color="white"></Navbar>
		<image style="width: 750upx;" src="/static/icons/gamePanel.jpg" mode="widthFix"></image>
		<view class="tree huxi1"><image :src="detail.seedGrowthStageImg"></image></view>
		<view class="tree-glass">{{ detail.seedName }}</view>
		<view v-if="!showSettingAddress" @click="signModal = true" class="jiaoshui huxi2"><image src="/static/icons/action_2.png"></image></view>
		<view v-if="!showSettingAddress" @click="handleUseProp" class="shifei huxi2"><image src="/static/icons/action_5.png"></image></view>
		<view @click="navTo(1)" class="myteam"><image src="/static/icons/myteam.png"></image></view>
		<!-- <view @click="navTo(2)" class="feiliao"><image src="/static/icons/feiliao.png"></image></view> -->
		<view @click="navTo(4)" class="shouhuo">
			<view class="shouhuo-tip">{{ finishCount }}</view>
			<image src="/static/icons/shouhuo.png"></image>
		</view>

		<view class="progress"><view :style="'width:' + progress + '%'" class="progress-line"></view></view>
		<view class="stage1">{{ detail.seedGrowthStageName }}</view>
		<view class="stage">成长值 {{ detail.seedGrowthValue }}/{{ detail.growthValue }} {{ detail.nextGrowthStateName ? '>>' + detail.nextGrowthStateName : '>>种植完成' }}</view>
		<view class="tip">浇水每四个小时可浇水一次，肥料可通过签到，抽奖获得</view>
		<view v-if="growthList.length" class="dongtai">
			<view class="dongtai-title">最新动态：</view>

			<view v-if="index < 3" :key="index" v-for="(item, index) in growthList" class="item">
				<view class="item-left">{{ item.createdByName }}{{ item.propName }}</view>
				<view class="item-right">+{{ item.recordValue }}成长值</view>
			</view>
			<view @click="lookMore" v-if="growthList.length > 3" class="more">查看更多>></view>

			<!-- 	<view v-else class="item">
				<view class="item-left">暂无动态</view>
				<view class="item-right">+10成长值</view>
			</view> -->
		</view>
		<view v-if="showSettingAddress" @click="handleSetting" class="setting">设置收货地址</view>
		<tui-modal :show="signModal" @click="handleShowVideo" @cancel="signModal = false" title="提示" content="观看完视频即可浇水"></tui-modal>
	</view>
</template>

<script>
import { plantFinishCount, growthDynamicListPage, useProp, settingAddress, planting, watering } from '@/service/farm.js';
import Navbar from '@/components/Navbar.vue';
export default {
	components: {
		Navbar
	},
	data() {
		return { time: 0, finishCount: 0, signModal: false, progress: 0, showSettingAddress: false, detail: {}, pageNum: 1, growthList: [] };
	},
	onLoad(options) {
		plantFinishCount().then(v => {
			this.finishCount = v;
		});
		this.$store.state.address = null;
	},
	onShow() {
		this.getPlanTree();
		const address = this.$store.state.address;

		if (address) {
			settingAddress({ userAddressId: address.id, userSeedId: this.detail.id }, { loading: true }).then(v => {
				uni.navigateTo({
					url: 'detail?id=' + this.detail.id
				});
			});
		}
	},
	methods: {
		lookMore() {
			uni.navigateTo({
				url: '/pages/game/farm/growth?id=' + this.detail.id
			});
		},
		handleEnd() {
			this.time = 0;
		},
		async getPlanTree() {
			const resp = await planting();
			if (!resp) {
				uni.redirectTo({
					url: 'myTree'
				});
			}
			this.detail = resp;
			if (resp.lastWaterTime) {
				let time = 14400 - (Date.now() - new Date(resp.lastWaterTime).getTime()) / 1000;
				this.time = time > 0 ? time : 0;
				console.log(this.time);
			}
			this.showSettingAddress = this.detail && this.detail.seedState == 'waitingSet';
			this.progress = ((this.detail.seedGrowthValue / this.detail.growthValue) * 100).toFixed(2);
			this.getGrowthDynamicListPage();
		},
		async getGrowthDynamicListPage() {
			try {
				this.loading = true;
				const resp = await growthDynamicListPage({ userSeedId: this.detail.id, pageNum: 1, pageSize: 10 });
				this.growthList = resp.data;
			} finally {
				this.loading = false;
			}
		},
		handleShowVideo({ index }) {
			this.signModal = false;
			if (index == 0) {
				return;
			}
			this.$loadRewardVideoAd(this.handleWater);
		},
		async handleWater(e) {
			try {
				uni.showLoading();
				await watering({ userSeedId: this.detail.id, codeId: e });
				this.getPlanTree();
				this.$emit('浇水成功');
			} finally {
				uni.hideLoading();
			}
		},
		handleSetting() {
			uni.navigateTo({
				url: '../../shop/address/address?type=' + 'select'
			});
		},
		async handleUseProp() {
			uni.navigateTo(
				{
					url: 'myFertilizer'
				},
				{ type: 'select', id: this.detail.id }
			);
		},
		navTo(index) {
			let url = '';
			switch (index) {
				case 1:
					url = '/pages/game/farm/myTeam';
					break;
				case 2:
					url = '/pages/game/farm/myFertilizer';
					break;
				case 3:
					url = '/pages/game/farm/myTeam';
					break;
				case 4:
					url = '/pages/game/farm/harvested';
					break;
				case 4:
					url = '/pages/game/farm/detail';
					break;
				default:
					break;
			}
			uni.navigateTo({
				url
			});
		}
	}
};
</script>

<style lang="scss" scoped>
view {
	box-sizing: border-box;
}
.page {
	overflow: hidden;
	min-height: 100vh;
	background: #6fc52d;
	font-size: 0;
}
.tree {
	width: 650upx;
	margin: 0 auto;
	position: absolute;
	top: 300upx;
	z-index: 100;

	left: 0;
	right: 0;
	image {
		width: 650upx;
		height: 650upx;
	}
}
.tree-glass {
	font-size: 24upx;

	color: #71412a;
	font-weight: 500;
	transform: rotate(12deg);
	position: absolute;
	top: 502upx;
	left: 404upx;
}
.dongtai {
	position: absolute;
	margin: 0 auto;
	left: 0;
	right: 0;
	top: 1160upx;
	width: 690upx;
	border-radius: 30upx;
	background-color: #e4f6c0;
	padding: 20upx 30upx;
	.item {
		display: flex;
		justify-content: space-between;
		color: #434343;
		font-size: 30upx;
		margin: 10upx 0;
		.item-left {
		}
		.item-right {
		}
	}
	.more {
		margin-top: 20upx;
		color: #4e8308;
		font-size: 30upx;
		text-align: right;
		font-weight: 500;
	}
}
.dongtai-title {
	font-size: 36upx;
	font-weight: 500;
	color: #588b14;
}
.jiaoshui {
	position: absolute;

	top: 720upx;
	right: 30upx;
	width: 100upx;
	height: 100upx;
	z-index: 100;
	image {
		width: 120upx;
		height: 120upx;
	}
}
.shifei {
	position: absolute;
	right: 30upx;
	top: 880upx;
	width: 100upx;
	z-index: 100;
	height: 100upx;
	image {
		width: 120upx;
		height: 120upx;
	}
}
.myteam {
	position: absolute;
	left: 30upx;
	top: 880upx;
	width: 100upx;
	z-index: 100;
	height: 100upx;
	image {
		width: 120upx;
		height: 110upx;
	}
}
.feiliao {
	position: absolute;
	left: 30upx;
	top: 620upx;
	width: 100upx;
	z-index: 100;
	height: 100upx;
	image {
		width: 120upx;
		height: 110upx;
	}
}
.shouhuo {
	position: absolute;
	left: 30upx;
	top: 400upx;
	width: 100upx;
	z-index: 100;
	height: 100upx;
	image {
		width: 120upx;
		height: 120upx;
	}
}
.progress {
	height: 34upx;
	width: 300upx;
	position: absolute;
	margin: 0 auto;
	left: 0;
	right: 0;
	padding: 6upx;
	top: 870upx;
	z-index: 100;
	background-color: #ffc44b;
	border-radius: 30upx;
	display: flex;
	align-items: center;
}

.progress-line {
	background: #77311d;
	width: 260upx;
	border-radius: 30upx;
	height: 24upx;
}
.shouhuo-tip {
	color: #ff6427;
	font-size: 24rpx;
	position: absolute;
	top: 5rpx;
	right: -6rpx;
	// position: relative;
	z-index: 100;
}
.stage {
	position: absolute;
	margin: 0 auto;
	left: 0;
	right: 0;
	display: flex;
	justify-content: center;
	color: #4c7610;
	font-size: 30upx;
	top: 950upx;
	z-index: 1;
}
.stage1 {
	position: absolute;
	margin: 0 auto;
	left: 0;
	right: 0;
	display: flex;
	justify-content: center;
	color: #4c7610;
	font-size: 30upx;
	top: 910upx;
	z-index: 1;
}
.stage2 {
	position: absolute;
	margin: 0 auto;
	left: 0;
	right: 0;
	display: flex;
	justify-content: center;
	color: #ffffff;
	font-size: 30upx;
	top: 1020upx;
	z-index: 1;
}
.tip {
	position: absolute;
	margin: 0 auto;
	left: 0;
	right: 0;
	display: flex;
	justify-content: center;
	color: #4c7610;
	font-size: 26upx;
	top: 1110upx;
	z-index: 1;
}
.setting {
	position: absolute;
	margin: 0 auto;
	left: 0;
	right: 0;
	display: flex;
	justify-content: center;
	background: linear-gradient(to bottom, #ffea78, #ffe433);
	border-radius: 24upx;
	height: 100upx;
	width: 710upx;
	line-height: 100upx;
	text-align: center;
	color: #ff7030;
	font-size: 30upx;
	top: 1000upx;
	z-index: 1;
}
</style>
